<template>
    <el-submenu v-if="configData.children && configData.children.length" :index="configData.path">
        <template slot="title">
            <i class="el-icon-folder"></i>
            <span>{{ configData.meta.title }}</span>
        </template>
        <MenNav v-for="(item, index) in configData.children" :key="index" :config-data="item"></MenNav>
    </el-submenu>
    <el-menu-item v-else :index="configData.path">
        <i class="el-icon-tickets"></i>
        <span slot="title">{{ configData.meta.title }}</span>
    </el-menu-item>
</template>

<script>
import { Submenu, MenuItem } from 'element-ui'
export default {
    name: 'MenNav',
    components: {
        ElSubmenu: Submenu,
        ElMenuItem: MenuItem
    },
    props: {
        configData: {
            type: Object,
            default: () => { }
        }
    }
}
</script>

<style></style>
